<template>
  <div>
    <van-row>
      <div style="float: left; margin: 20px">
        <van-icon name="cross" size="40" color="rgb(146, 153, 159)" />
      </div>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col span="12">
        <h1>汽配商城</h1>
      </van-col>
    </van-row>
    <van-form @submit="onSubmit">
      <div class="shuru">
        <van-field
          v-model="username"
          type="username"
          left-icon="user-o"
          placeholder="请输入手机号码/邮箱"
          :rules="[{ required: true, message: '请填用户名' }]"
        />
        <hr />
        <van-field
          v-model="password"
          type="password"
          left-icon="smile-o"
          placeholder="请填写密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <hr />
      </div>
      <van-row>
        <van-col span="24"></van-col>
      </van-row>
      <v-row>
        <v-col
          @click="resgister"
          style="float: left; margin: 1.25rem; color: rgb(65, 153, 240)"
          >立即注册!</v-col
        >
        <v-col @click="forgetpassword" style="float: right; margin: 1.25rem; color: rgb(65, 153, 240)"
          >忘记密码?</v-col
        >
      </v-row>

      <div style="margin: 1.875rem">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name:login,
  data() {
    
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    resgister() {
      this.$router.push("/register");
    },
    forgetpassword(){
this.$router.push("/forgetpassword")
    },
    onSubmit(values) {
      console.log("submit", values);
    },
  },
  components: {},
};
</script>

<style lang="less">
.van-col--8 {
  margin: 1.25rem;
}
.shuru {
  width: 80%;
  margin-left: 2.5rem;
}
</style>